<template>
  <div class="cataLists">
		<!-- 顶部搜索框 -->
	  <div class="search-bar">
        <el-form :inline="true" :model="searchParams" class="demo-form-inline">
            <el-form-item label="关键字">
                <el-input v-model="searchParams.keyWords" placeholder="关键字"></el-input>
            </el-form-item>
             <el-date-picker
                v-model="searchParams.range"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
								format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                align="right">
                </el-date-picker>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
            </el-form>
    </div>
		<!-- 顶部搜索框 -->
		<!-- 分类商品 -->
		<div class="cataDisplay">
			<el-table
      :data="cataLists"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
				
      </el-table-column>
    </el-table>
		</div>
		<!-- 分类商品 -->
  </div>
</template>

<script>
import {getCataLists }from '_api'
    export default {
        name: 'cataLists',
        data() {
          return {
            searchParams: {
            keyWords: '',
            range: [],
						cataLists: []
            }
         }
          },
					created () {
						this.getCataLists()
					},
        methods: {
					
					getCataLists () {
						// 请求分类列表数据
						getCataLists().then(res => {
							if(res.data.code === 200){
								this.cataLists = res.data.data.Lists
							}
						})

						

					},
					// 顶部搜索 查询按钮
					onSearch () {
							console.log(this.searchParams);
					}
        }
    }
</script>

<style lang="scss" scoped>

</style>